<script setup lang="ts">
import AMap from "@/components/aMap/indexPay.vue";
import BoxBlock from "../components/boxBlockMiddle.vue";
import { defineAsyncComponent } from "vue";

const bulkLineChart = defineAsyncComponent(
  () => import("../components/bulkLineChartM.vue")
);
</script>
<template>
  <div class="flex justify-center relative pl-5 pr-5 pt-25">
    <div class="absolute top-10 z-index-10 w-full flex justify-around">
      <div class="mid-header-bg p-2">
        <div class="text-center text-2xl">当日实时收费金额 (元)</div>
        <div class="flex mid-header-number justify-around">
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>1</div>
          <div>3</div>
          <div>5</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>1</div>
          <div>3</div>
          <div>0</div>
        </div>
      </div>
      <div class="mid-header-bg p-2">
        <div class="text-center text-2xl">当日实时收费次数 (笔)</div>
        <div class="flex mid-header-number justify-around">
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>9</div>
        </div>
      </div>
    </div>
    <AMap />
    <div class="h-1/3 absolute bottom-0 w-full">
      <BoxBlock class="h-full w-full" title="近24小时成交曲线图">
        <bulkLineChart />
      </BoxBlock>
    </div>
  </div>
</template>
<style scoped lang="less">
.mid-header-bg {
  background: url(../assets//topPanelBackImg.4f57f721.png) no-repeat;
  background-size: 100% 95px;
  height: 500px;
  z-index: 10;
  width: 44%;
  height: 95px;
}
.mid-header-number {
  margin-top: 10px;
  div {
    font-size: 25px;
    padding: 2px 3px;
    border: 1px solid #4c619d;
    background-color: #1b327e;
  }
}
</style>
